import Svg from "@/components/base/Svg"
import styled from "@emotion/styled"

const Header = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    height: 44rem;
    padding: 0 16rem;
`
const ArrowLeft = styled.span`
    user-select: none;
    width: 28rem;
    height: 28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    left: 12rem;
    top: 50%;
    transform: translateY(-50%);
`

export const TransactionDetailHeader = ({ onClick }: { onClick?: () => void }) => {
    return (
        <Header>
            <ArrowLeft onClick={() => onClick?.()}>
                <Svg src={"pages/BetRecordPage/icon_arrow_left.svg"} />
            </ArrowLeft>
        </Header>
    )
}
